<!-- faultDetail 故障与限位详情页面 -->
<!DOCTYPE html>
<html>

<head>
    <title>故障与限位详情页面</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            margin: 10 10 10 10;
            padding: 0;
        }

        .el-checkbox__label{
            width: 335px;
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="./css/notiflix-3.2.5.min.css">
    <script src="./js/notiflix-3.2.5.min.js" type="text/javascript"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./config.js"></script>
    <script src="./js/element-ui/index.js"></script>
    <link rel="stylesheet" href="./js/element-ui/index.css">
    <script src="./js/echarts.min.js"></script>
</head>

<body>

    <div id="app">
        <el-row style="margin: 5px;">
            <el-col :span="8">
                <el-date-picker v-model="beginDate" type="date" placeholder="选择日期" :picker-options="poptions" size="mini" style="width: 130px;"
                    value-format="yyyy-MM-dd" :clearable="false">
                </el-date-picker>
                <el-time-select v-model="beginTime" :picker-options="{
                        start: '00:00',
                        step: '01:00',
                        end: '23:00'
                        }" placeholder="选择时间" size="mini" style="width: 110px;" :clearable="false"
                    @change="handleBeginTimeChange">
                </el-time-select>
                <!-- ~ -->
                <!-- <el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="poptions" size="mini" style="width: 130px;"
                    value-format="yyyy-MM-dd" :clearable="false">
                </el-date-picker> -->
                <el-time-select v-model="endTime" :picker-options="{
                    start: '01:00',
                    step: '01:00',
                    end: '24:00'
                    }" placeholder="" size="mini" :disabled="true" style="width: 110px;display: none;">
                </el-time-select>
            </el-col>
            <el-col :span="16">
                <el-button type="primary" icon="el-icon-search" size="mini" round @click="qryChartsData">
                </el-button>
            </el-col>
        </el-row>
        <el-row style="margin: 5px;">
            <!-- <el-checkbox style="float: left;margin-right: 30px;" :indeterminate="isIndeterminate"
                        v-model="checkAll" @change="handleCheckAllChange">全选
                    </el-checkbox> -->
            <el-checkbox-group style="float: left;" v-model="checkedOptions" @change="handleCheckedChange" :min="1"
                :max="8">
                <el-checkbox v-for="option in checkOptions" :label="option">
                </el-checkbox>
            </el-checkbox-group>
        </el-row>
        <el-row>
            <div id="myChart" style="width: 1550px; height: 700px;"></div>
        </el-row>
    </div>

    <script>

        // 加载
        window.onload = function () {
            let Component = Vue.extend(Main);
            new Component().$mount('#app');
            Notiflix.Notify.init({
                timeout: g_NotiflixTimeout
            });
        };

        var Main = {
            data() {
                return {
                    checkAll: false,
                    isIndeterminate: true,
                    loading: true,
                    totalConfig: {},
                    checkOptions: [],
                    checkedOptions: [],
                    checkedOptionsTrans: [],
                    beginTime: new Date().getHours() + ':00',
                    endTime: (new Date().getHours() + 1) + ':00',
                    beginDate: new Date().getFullYear() + '-' + fomulaTime(new Date().getMonth() + 1) + '-' + new Date().getDate(),
                    endDate: new Date().getFullYear() + '-' + fomulaTime(new Date().getMonth() + 1) + '-' + new Date().getDate(),
                    poptions: {
                        // 时间不能大于当前时间
                        disabledDate: time => {
                            return time.getTime() > Date.now()
                        }
                    }
                } 
            },
            methods: {
                handleCheckAllChange(val) {
                    this.checkedOptions = val ? this.checkOptions : [this.checkOptions[0]];
                    this.isIndeterminate = false;
                    this.checkedOptionsTrans = [];
                    for (let i = 0; i < this.checkedOptions.length; i++) {
                        this.checkedOptionsTrans.push(this.totalConfig[this.checkedOptions[i]].value);
                    }
                },
                handleCheckedChange(value) {
                    let checkedCount = value.length;
                    this.checkAll = checkedCount === this.checkOptions.length;
                    this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkOptions.length;
                    this.checkedOptionsTrans = [];
                    for (let i = 0; i < value.length; i++) {
                        this.checkedOptionsTrans.push(this.totalConfig[value[i]].value);
                    }
                },
                handleBeginTimeChange(val) {
                    this.endTime = fomulaTime(parseInt(val.split(':')) + 1) + ':00';
                },
                qryChartsData() {
                    let request = {};
                    request.cmdType = "GET_ECHARTS_DATA";
                    request.date = this.beginDate;
                    request.beginTime = this.beginTime;
                    // request.endDate = this.endDate;
                    if(this.endTime == "24:00"){
                        this.endTime = "23:59"
                    }
                    request.endTime = this.endTime;
                    request.requireChart = this.checkedOptionsTrans.join(';');
                    vueMain = this;
                    $.ajax({
                        url: g_CenterHttpUrl,
                        contentType: 'application/json',
                        data: JSON.stringify(request),
                        async: true,
                        type: "post",
                        dataType: "json",
                        success: function (rsp) {
                            if (rsp["resCode"] == g_ResCodeSuccess) {
                                chartsDataArr = {};
                                // let hour = fomulaTime(vueMain.beginTime.split(':')[0]);
                                let hour = vueMain.beginTime.split(':')[0];
                                for (let i = 0; i < rsp["resMsg"].length; i++) {
                                    chartsDataArr[rsp["resMsg"][i].key] = [];
                                    for (let j = 0; j < rsp["resMsg"][i].data.length; j++) {
                                        chartsDataArr[rsp["resMsg"][i].key].push([
                                            vueMain.beginDate + " " + hour + ":" + fomulaTime(Math.floor(j / 60)) + ":" + fomulaTime(j % 60),
                                            rsp["resMsg"][i].data[j]
                                        ]);
                                    }
                                }
                                vueMain.dealEchartOption();
                            }
                            else {
                                document.getElementById('myChart').removeAttribute('_echarts_instance_');
                                Notiflix.Notify.warning("获取图表数据失败：" + rsp["resMsg"]);
                            }
                        },
                        error: function (rsp) {
                            document.getElementById('myChart').removeAttribute('_echarts_instance_');
                            Notiflix.Notify.failure("获取图表数据异常");
                        }
                    });
                },
                qryChartsConfig() {
                    let request = {};
                    request.cmdType = "GET_ECHARTS_CONFIG";
                    vueMain = this;
                    $.ajax({
                        url: g_CenterHttpUrl,
                        contentType: 'application/json',
                        data: JSON.stringify(request),
                        async: true,
                        type: "post",
                        dataType: "json",
                        success: function (rsp) {
                            if (rsp["resCode"] == g_ResCodeSuccess) {
                                vueMain.dealConfigs(rsp["resMsg"]);
                            }
                            else {
                                vueMain.dealConfigs([]);
                                Notiflix.Notify.warning("获取图表数据失败：" + rsp["resMsg"]);
                            }
                        },
                        error: function (rsp) {
                            vueMain.dealConfigs([]);
                            Notiflix.Notify.failure("获取图表数据异常");
                        }
                    });
                },
                dealConfigs(configs) {
                    if (configs.length > 0) {
                        for (let i = 0; i < configs.length; i++) {
                            this.checkOptions.push(configs[i].key);
                            this.totalConfig[configs[i].key] = {
                                value: configs[i].value,
                                color: configs[i].color,
                                min: parseFloat(configs[i].min),
                                max: parseFloat(configs[i].max),
                            };
                        }
                        this.checkedOptions.push(this.checkOptions[0]);
                        this.checkedOptionsTrans.push(this.totalConfig[this.checkOptions[0]].value);
                    }
                },
                dealEchartOption() {
                    options.legend.data = this.checkedOptions;
                    options.yAxis = [];
                    options.series = [];
                    options.color = [];
                    for (let i = 0; i < this.checkedOptions.length; i++) {
                        let item = {};
                        item.name = this.checkedOptions[i];
                        item.type = 'value';
                        item.min = this.totalConfig[this.checkedOptions[i]].min;
                        item.max = this.totalConfig[this.checkedOptions[i]].max;
                        item.axisTick = { show: true, inside: (i > 0 && i % 2 == 0) ? true : false };
                        item.axisLabel = { inside: (i > 0 && i % 2 == 0) ? true : false };
                        item.offset = chartsYaxisOffset[i];
                        item.axisLine = { show: true, lineStyle: { color: this.totalConfig[this.checkedOptions[i]].color, width: 2 } };
                        item.splitLine = { show: false };
                        options.yAxis.push(item);
                        options.color.push(this.totalConfig[this.checkedOptions[i]].color);
                        let serie = {};
                        serie.name = this.checkedOptions[i];
                        serie.type = 'line';
                        serie.data = chartsDataArr[this.checkedOptionsTrans[i]];
                        serie.yAxisIndex = i;
                        serie.symbol = 'none';
                        serie.smooth = true;
                        options.series.push(serie);
                    }
                    initEchats();
                }
            },
            mounted() {
                this.qryChartsConfig();
            }
        }
        let myEChart;
        let chartsOptions = [];
        let chartsDataArr = {};
        let chartsYaxisOffset = [0, 0, -1035, 110, -1140, 220];
        let chartsYaxisColor = ['forestgreen', 'cornflowerblue', 'pink', 'palevioletred', 'mediumpurple', 'orange'];
        let options = {
            xAxis: {
                type: 'time',
                axisLabel: {
                    show: true,
                    showMinLabel: true,
                    showMaxLabel: true,
                    formatter: function (value, index) {
                        // 格式化成时分秒
                        let date = new Date(value);
                        return fomulaTime(date.getHours()) + ":" + fomulaTime(date.getMinutes()) + ":" + fomulaTime(date.getSeconds());
                    }
                },
                axisLine: {
                    lineStyle: { color: 'black', width: 2 }
                }
            },
            yAxis: [],
            series: [],
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            grid: { left: '20%', right: '20%' },
            legend: { data: [] },
            color: [],
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
                {
                    start: 0,
                    end: 100
                }
            ],
            animation: false
        };
        function initEchats() {
            document.getElementById('myChart').removeAttribute('_echarts_instance_');
            myEChart = echarts.init(document.getElementById('myChart'));
            myEChart.setOption(options);
        }

        function fomulaTime(value) {
            if (value < 10) {
                value = '0' + value;
            }
            return value
        }
    </script>
</body>

</html>